<template>
  <div class="lifecycle-flow-chart-container">
    <!-- {{ props.emissionData }} -->
    <div class="flow-chart-content">
      <div class="chart-content-header">
        <div class="content-header-left">输入流</div>
        <div class="content-header-right">活动数据</div>
      </div>
      <div class="chart-content-body">
        <FlowItem
          v-for="item in props.emissionData.inputFlow"
          :key="item.flowName + item.activityDataUnit"
          :label="item.flowName"
          :value="item.activityData"
          :unit="item.activityDataUnit"
          :item="item"
        />
      </div>
    </div>
    <div class="flow-chart-flows">
      <img
        class="flow-chart-flows-image"
        :src="
          require(`@/assets/images/emission/order${props.emissionData.inputFlow.length || 0}.png`)
        "
        v-if="props.emissionData?.inputFlow?.length"
      />
    </div>
    <div class="flow-chart-content">
      <div class="chart-content-header">
        <div class="content-header-left">主产品</div>
        <div class="content-header-right">产品重量</div>
      </div>
      <div class="chart-content-body">
        <div class="center">
          <div class="flex-tit">
            <div class="l"> {{ empty(props.modelDetail?.modelName) }} </div>
            <div class="r">
              {{ numberFormat(props.modelDetail?.weight, 2) }}{{ empty(props.modelDetail?.unit) }}
            </div>
          </div>
          <div class="total">
            总碳排：{{ renderResultUnit(modelDetail?.calcResult, ' CO₂e', 2) }}
          </div>
        </div>
      </div>
    </div>
    <div class="flow-chart-flows">
      <img
        class="flow-chart-flows-image flow-chart-flows-image--reverse"
        :src="
          require(`@/assets/images/emission/order${props.emissionData.outputFlow.length || 0}.png`)
        "
        v-if="props.emissionData?.outputFlow?.length"
      />
    </div>
    <div class="flow-chart-content">
      <div class="chart-content-header">
        <div class="content-header-left">输出流</div>
        <div class="content-header-right">活动数据</div>
      </div>
      <div class="chart-content-body">
        <FlowItem
          v-for="item in props.emissionData.outputFlow"
          :key="item.flowName"
          :label="item.flowName"
          :value="item.activityData"
          :unit="item.activityDataUnit"
          :item="item"
        />
      </div>
    </div>
    <div class="flow-chart-tips">输入输出流仅展示前 10 条数据</div>
  </div>
</template>

<script lang="ts" setup name="LifecycleFlowChart">
import { defineProps } from 'vue';
import FlowItem from './components/FlowItem/index.vue';
import type {
  GetModelFLowEmissionResult,
  GetVisibleModelDetailResult
} from '@/apis/pcf/pcfForm/model/pcfFormModel';
import { numberFormat, empty, renderResultUnit } from '@/utils';

interface LifecycleFlowChartProps {
  emissionData: GetModelFLowEmissionResult;
  modelDetail?: GetVisibleModelDetailResult;
}
const props = defineProps<LifecycleFlowChartProps>();
</script>

<style lang="scss" scoped>
.lifecycle-flow-chart-container {
  position: relative;
  display: flex;
  margin: 0 20px 24px;
  padding: 8px 30px;
  height: 424px;
  background: #f3f7fb;
  border-radius: 6px;
  .flow-chart-tips {
    padding: 0 6px;
    right: 9px;
    bottom: 10px;
    position: absolute;
    height: 24px;
    line-height: 24px;
    background: #edf2f7;
    border-radius: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
  }
  .flow-chart-flows {
    padding-top: 36px;
    flex-shrink: 0;
    width: 60px;
    height: 100%;
    .flow-chart-flows-image {
      width: 58px;
      &.flow-chart-flows-image--reverse {
        margin-left: 2px;
        transform: scaleX(-1);
      }
    }
  }
  .flow-chart-content {
    flex: 1;
    .chart-content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      .content-header-left {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #0a1f33;
        line-height: 20px;
      }
      .content-header-right {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7a8a99;
        line-height: 20px;
      }
    }

    .chart-content-body {
      .center {
        height: 66px;
        padding: 10px 12px;
        background: #fff;
        border-radius: 6px;

        .flex-tit {
          display: flex;
          justify-content: space-between;
          .l {
            font-size: 12px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #0a1f33;
            line-height: 20px;
          }

          .r {
            font-size: 12px;
            font-family: HelveticaNeue;
            color: #435970;
            line-height: 20px;
          }
        }

        .total {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #7a8a99;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
